<template>
  <div class="page-wrapper">
    <div class="goods-main-info">
      <div class="goods-imgs">
        <el-carousel class="banners" :interval="5000">
          <el-carousel-item v-for="(item,index) in detailObj.gallery" :key="index">
            <img :src="item" class="slide-image">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="goods-title">
        <div class="goods-price">
          <div class="price">
            <div class="main-price">
              <div class="icon-rmb">￥</div>{{detailObj.ptPrice}}
            </div>
            <div class="sub-price">￥{{detailObj.productPrice}}</div>
          </div>
          <div class="store">库存{{detailObj.productStock}}件</div>
        </div>
        <div class="goods-name" v-if="detailObj && detailObj.productActivitiesDetailResDTO">{{detailObj.productActivitiesDetailResDTO.productName}}</div>
      </div>
    </div>
    <div class="sku-info" v-if="detailObj.propertiesName">
      <div class="sku-title">规格</div>
      <div class="select">{{detailObj.propertiesName}}
        <!-- <img class="icon-go" src="../../assets/icon-go.png" mode="aspectFit"/> -->
      </div>
    </div>
    <div class="team-info">
      <div class="info-header">
        <img v-if="detailObj && detailObj.productActivitiesDetailResDTO && detailObj.productActivitiesDetailResDTO.shopSimpleResDTO && detailObj.productActivitiesDetailResDTO.shopSimpleResDTO.image" class="head-img" :src="detailObj.productActivitiesDetailResDTO.shopSimpleResDTO.image"/>
        <img v-else class="head-img" src="../../assets/item.jpg"/>
        <div class="name" v-if="detailObj && detailObj.productActivitiesDetailResDTO">
          {{detailObj.productActivitiesDetailResDTO.shopSimpleResDTO.shopName}}
        </div>
      </div>
      <div class="team-detail" v-if="teamArr.length">
        <div class="team-main-info">
          <div class="sku-title">
            {{total}}人在拼团，可直接参与
          </div>
          <div class="select" @click="openTeam()">请选择<img class="icon-go" src="../../assets/icon-go.png" mode="aspectFit"/></div>
        </div>
        <div class="item-list">
          <div class="team-it" v-for="(item,index) in teamArr" :key="index" v-show="index <= 1">
            <div class="it-user">
                <img class="it-img" :src="item.avatar || '../../assets/head.jpg'" mode="aspectFit"/>
                <div class="user-name">{{item.nickName}}</div>
            </div>
            <div class="user-it-info">
              <div class="tip">
                还差<div class="style">{{item.differenceUserNum}}人</div>拼成
              </div>
              <button class="team-btn" @click="joinTeam" data-index="index"  data-id="item.tpuId">去拼团</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-info" style="padding-bottom:2.66rem">
      <detailInfo  :detailInfo.sync="detailDes"></detailInfo>
    </div>
    <div class="fix-footer">
      <!-- <div class="service">
        <div class="service-img">
          <img class="icon-service" src="../../assets/icon-service.png" mode="aspectFit"/>
        </div>
        <div>客服</div>
      </div> -->
      <button open-type="contact" class="service">
        <div class="service-img">
          <img class="icon-service" src="../../assets/icon-service.png" mode="aspectFit"/>
        </div>
        <div>客服</div>
      </button>
      <div class="handle-btns">
        <!-- <div class="btn  shop-btn" @click="goBuy">
          <div class="price">￥{{detailObj.productPrice}}</div>
          <div class="tip-title">单独购买</div>
        </div> -->
        <div class="btn" @click="subBuy">
          <div class="price">￥{{detailObj.ptPrice}}</div>
          <div class="tip-title">{{detailObj.ptSize}}人团</div>
        </div>
      </div>
    </div>
    <MyDialog
      title="正在拼团"
      :dialogShow.sync="teamModalStatus">
      <div class="team-modal" slot="content">
        <div class="team-modal-content">
          <div class="team-modal-title">正在拼团</div>
          <div class="item-list team-item-list">
            <scroll-div scroll-y style="height: 400px;">
              <div class="team-it" v-for="(item,index) in teamArr" :key="index">
                <div class="it-user">
                    <img class="it-img" :src="item.avatar || '../../assets/head.jpg'" mode="aspectFit"/>
                    <div class="user-name">{{item.nickName}}</div>
                </div>
                <div class="user-it-info">
                  <div class="tip">
                    还差<div class="style">{{item.differenceUserNum}}人</div>拼成
                  </div>
                  <button class="team-btn" @click="joinTeam" data-index="index" data-id="item.tpuId">去拼团</button>
                </div>
              </div>
            </scroll-div>
          </div>
        </div>
        <div class="close-btn" @click="closeTeam()">
          <img class="icon-close" src="../../assets/icon-close-c.png"/>
        </div>
      </div>
    </MyDialog>
    <teamDia
      title="加入拼团"
      :dialogShow.sync="teamModalSelectStatus"
    >
      <div class="team-modal" slot="content">
        <div class="team-modal-content join-team">
          <div class="main-title">参与{{currentTeamObj.nickName}}的拼单</div>
          <div class="sub-title">仅剩{{currentTeamObj.differenceUserNum}}个名额，{{detailObj.ptEndTimeTamp}}后结束</div>
          <div class="head-imgs">
            <img class="it-img" src="currentTeamObj.avatar || '../../assets/head.jpg'" />
            <img class="it-img" src="../../assets/icon-wei.png" />
          </div>
          <div class="sub-btn" @click="subJoin()">
            确定
          </div>
        </div>
        <div class="close-btn" @click="closeJoin()">
          <img class="icon-close" src="../../assets/icon-close-c.png"/>
        </div>
      </div>
    </teamDia>

     <!-- 复制弹窗 -->
    <div :class="['copy-modal',isCopyModal ? 'copy-modal-show' : '']" catchtouchmove="ture">
      <div class="copy-modal-bg" catchtouchmove="true" @click="toggleStatus('isCopyModal', false)"></div>
      <div class="copy-modal-content" catchtap>
        <div class="close-btn"  @click="toggleStatus('isCopyModal', false)">
          <img class="close" src="../../assets/close.png" mode="aspectFill"/>
        </div>
        <div class="info-header">
          <img class="goods-img" v-if="skuObj.gallery && skuObj.gallery.length" :src="skuObj.gallery[0]" mode="aspectFill"/>
          <div class="goods-info">
            <div class="info-title">{{skuObj.productName}}</div>
            <div class="info-price">￥<div class="rmb">{{skuObj.productPromotePrice}}</div></div>
          </div>
        </div>
        <div class="skus-info" v-if="detailObj.productItemPropList">
          <div class="skus-item" v-for="(item,index) in detailObj.productItemPropList" :key="index">
            <div class="sku-label">{{item.productAttrName}}</div>
            <radio-group class="sku-items" @change="selectPropId" data-index="index" >
                <label :class="['sku-label', it.propValueId === item.selectId? 'active': '']" v-for="(it,index) in item.propValueList" :key="index">
                  <radio class="prop-value" hidden value="it.propValueId"  data-index="index"/>
                  <div class="it">{{it.propValue}}</div>
                </label>
            </radio-group>
          </div>
        </div>
        <div class="buy-num">
          <div>购买数量</div>
          <div class="num-btns">
            <div class="subtract-btn" @click="subtract()">-</div>
            <div class="input-btn"><input class="input" value="num" type="number" @input="input()" /></div>
            <div class="add-btn" @click="add()">+</div>
          </div>
        </div>
        <div class="handle-btn">
          <button class="sub-btn" @click="subCopyCar()">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { API } from '../../config'
import MyDialog from '../dialog'
import detailInfo from './components/detailInfo'

export default {
   components: {
    MyDialog: MyDialog,
    teamDia: MyDialog,
    detailInfo:detailInfo
  },
  data(){
    return {
      indicatorDots: true,
      teamModalStatus: false,
      teamModalSelectStatus: false,
      isCopyModal: false,
      detailObj: {},
      skuObj: {},
      tab: 0,
      num: 1,
      skuName: '',
      selArr: [],
      detailDes: {
        productDescription: '',
        buyInstructions: ''
      },
      teamArr: [],
      selectTeamPuid: '',
      currentTeamObj: {},
      total: 0,
      pageNum:1,
      pageSize:20
    }
  },
  methods:{
    // 打开弹窗
    openSku() {
      this.isCopyModal = true
    },
    // 打开拼团弹窗
    openTeam() {
      this.teamModalStatus = true
    },
    // 关闭拼团弹窗
    closeTeam() {
      this.teamModalStatus = false
    },
    joinTeam(e) {
      const id = e.currentTarget.dataset.id
      const index = e.currentTarget.dataset.index
      this.selectTeamPuid = id
      this.currentTeamObj = this.teamArr[index]
      this.teamModalSelectStatus = true
    },
    // 确定加入弹窗
    subJoin() {
      this.$router.push({
        path: `/order/order?type=team&productSkuId=${this.detailObj.productSkuId}&tpuid=${this.selectTeamPuid}`
      })
      this.teamModalSelectStatus = false
      this.teamModalStatus = false
    },
    // 关闭加入弹窗
    closeJoin() {
      this.teamModalSelectStatus = false
    },
    subCopyCar() {
      this.isCopyModal = false
    },
    /**
     * 操作弹窗
     */
    toggleStatus(type, status) {
      const bool = status === 'true'
      switch (type) {
        case 'isCopyModal':
          this.isCopyModal = bool
          break
        default:
          break
      }
    },
    /**
     * 数量增加
     */
    add() {
      this.numObj.add()
      this.change()
    },
    /**
     * 数量减少
     */
    subtract() {
      this.numObj.sub()
      this.change()
    },
    /**
     * 数量减少
     */
    input(e) {
      const n = parseInt(e.target.detail)
      this.numObj.setNum(n)
      this.change()
    },
    // 选择sku
    selectPropId(e) {
      const selVal = parseInt(e.detail.value)
      const index = e.currentTarget.dataset.index
      this.detailObj.productItemPropList[index].selectId = selVal
      this.getSku()
    },
    // 拼团购买
    subBuy() {
      this.$router.push({
        path: `/order/order?type=team&productSkuId=${this.detailObj.productSkuId}`
      })
    },
    // 单独购买
    goBuy() {
      this.$router.push({
        path: `/order/order?productSkuId=${this.detailObj.productSkuId}&num=1`
      })
    },
    initFun() {
      let vm = this
      vm.getDetail()
      vm.getTeamLeader()
    },

    // 获取团长列表
    getTeamLeader(pageNum, pageSize) {
      let vm = this
      const leadParams = {
        productSkuId: vm.$route.query.id,
        pageNum: pageNum || 1,
        pageSize: pageSize || 10

      }
      vm.$axios.get(API + '/product/getLeaderUserResDTOList/' + leadParams.productSkuId + '/' + leadParams.pageNum + '/' + leadParams.pageSize).then((resp) => {
         let leaderRes = resp.data
         if (leaderRes.code === 200) {
          vm.total = leaderRes.data.total
          vm.teamArr = leaderRes.data.data
        }
      })
    },

    judgeSku() {
      console.log(this.selArr)
      return this.detailObj.productItemPropList && (this.selArr.length !== this.detailObj.productItemPropList.length)
    },
    /**
     * 数量变化
     */
    change() {
      this.num = this.numObj.getNum()
      // 数量变化处理逻辑
    },
    /**
     * 获取商品详情
     *  */
    getDetail() {
      let vm = this
      vm.$axios.get(API + '/product/getGroupBuySkuDetail/' + this.$route.query.id).then((resp) => {
        let res = resp.data
        if (res.data.productActivitiesStatus !== 'INPROGRESS') {
          setTimeout(() => {
            this.$router.push({
              path: '/'
            })
          }, 300)
          vm.$message('该商品团购已结束')
        }
        vm.detailObj = res.data
        vm.detailDes = {
          productDescription: vm.detailObj.productActivitiesDetailResDTO.productDescription,
          buyInstructions: vm.detailObj.productActivitiesDetailResDTO.buyInstructions
        }
      })
    },
    /**
     * 获取商品sku
     *  */

    /**
     * 获取商品sku
     *  */
    getSku(params) {
      let vm = this
      let props = ''
      let name = ''
      vm.selArr = []
      this.detailObj.productItemPropList.forEach(item => {
        if (item.selectId) {
          vm.selArr.push(item.selectId)
          let temp = item.propValueList.find(it => {
            return it.propValueId === item.selectId
          })
          name += (name ? ' + ' : '') + temp['propValue']
        }
      })
      this.skuName = name
      if (vm.selArr.length === this.detailObj.productItemPropList.length) {
        props = vm.selArr.sort().join(',')
        vm.$axios.post(API + '/product/skudetail',{productId: vm.detailObj.productId, propValueIds: props}).then((resp) => {
          let res = resp.data 
          vm.skuObj = res.data
          vm.numObj =  vm.skuObj.productStock/100
          vm.num = 1
        })
      }
    }
  },
  mounted() {
    this.initFun()
  }
}

</script>

<style lang='less' scoped>
@import '../../css/goods/detail.less';
</style>
